Vanilla Form - User Manual
Introduction
Thank you for using Vanilla Form. This manual shows you how easy is to integrate Vanilla Form with your website. Vanilla Form uses JavaScript instructions to send filled data to PHP file, which works on servers side. PHP file parses data and calls PHP native function mail(). Thanks for JavaScript Asynchronous Requests your website doesn't reload, which improves your User Experience. Vanilla Form doesn't use annoying captcha, but it has built-in anti bot protection.
Form is independent software which makes it fast, lightweight and scalable. You don't need to use 3-rd party libraries like jQuery. But if you want to, you can easily integrate it with any library you want.
Installation
Step 1
Update PHP File and point recipients e-mail address by editing TO_EMAIL constant. On to these email address all form inquires/messages will be send.
// If is not empty it sets a header From in e-mail message (sets sender e-mail).
// Note: some hosting servers can block sending e-mails with custom From field in header.
// If so, leave this field as empty.
define('FROM_EMAIL', '');
// Recipient's e-mail. To this e-mail messages will be sent.
// e.g.: john@example.com
// multiple recipients e.g.: john@example.com, andy@example.com
define('TO_EMAIL', 'john@example.com');
After that upload this file on to your web page server. Remember the URL which stands for this file. To double check whether URL is valid open it in your web browser. You should see OK word on your screen. This means that URL to PHP file is correct and PHP configuration has been done properly.
Step 2
Upload on server and import Vanilla Form JavaScript file and CSS file into head section of your html document. Double check whether path to these files is set correctly.
<head>
<!-- ...some head section content... -->
<link rel="stylesheet" href="path/to/css/vanilla-form.min.css">
<script src="path/to/css/vanilla-form.min.js"></script>
</head>
Insert HTML Form markup into your website. Make sure that the action attribute in form tag has correct path to PHP file and the method attribute is set to post.
<!-- Vanilla Form markup starts here -->
<form action="standard-contact-form.php" method="post" class="vanilla-form" novalidate="novalidate">
<!-- Left column -->
<div class="column-50">
<input type="text" name="name" placeholder="Your name" required="required">
<input type="email" name="email" placeholder="Your e-mail" required="required">
</div><!--
Right column
--><div class="column-50">
<input type="tel" name="tel" placeholder="Phone">
<label class="custom-select">
<select name="department">
<option>Sales</option>
<option>Marketing</option>
<option>Customer Support</option>
<option>Other</option>
</select><span><!-- fake select handler --></span>
</label>
</div>
<div class="column-100">
<div class="radio-set">
Your sex:
<label><input type="radio" name="sex" value="M"><span><!-- fake radio --></span> Male</label>
<label><input type="radio" name="sex" value="F"><span><!-- fake radio --></span> Female</label>
</div>
<textarea name="message" placeholder="Type your message here..."></textarea>
<label>
<input type="checkbox" name="terms" value="true" required="required">
<span><!-- fake checkbox --></span>
<span class="wrapped-label">Yes, I accept the terms of use.</span>
</label>
</div>
<div class="column-100 center">
<input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
</div>
<footer class="notification-box"></footer>
</form>
<!-- Vanilla Form markup ends here -->
Step 3
Finally we need to initialize Vanilla From. Initialization needs to be done after form markup will be loaded. To bind a form element with Vanilla Form you can simply add following line into form tag of html markup which you have inserted before.
onLoad="new VanillaForm(this)"
Now your html markup of form should looks like here (underlined text is a part that was modified):
<!-- Vanilla Form markup starts here -->
<form onLoad="new VanillaForm(this)" action="php/standard-contact-form.php" method="post" class="vanilla" novalidate="novalidate">
<!-- Left column -->
<div class="column-50">
<input type="text" name="name" placeholder="Your name" required="required">
<input type="email" name="email" placeholder="Your e-mail" required="required">
</div><!--
Right column
--><div class="column-50">
<input type="tel" name="tel" placeholder="Phone">
<label class="custom-select">
<select name="department">
<option>Sales</option>
<option>Marketing</option>
<option>Customer Support</option>
<option>Other</option>
</select><span><!-- fake select handler --></span>
</label>
</div>
<div class="column-100">
<div class="radio-set">
Your sex:
<label><input type="radio" name="sex" value="M"><span><!-- fake radio --></span> Male</label>
<label><input type="radio" name="sex" value="F"><span><!-- fake radio --></span> Female</label>
</div>
<textarea name="message" placeholder="Type your message here..."></textarea>
<label>
<input type="checkbox" name="terms" value="true" required="required">
<span><!-- fake checkbox --></span>
<span class="wrapped-label">Yes, I accept the terms of use.</span>
</label>
</div>
<div class="column-100 center">
<input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
</div>
<footer class="notification-box"></footer>
</form>
<!-- Vanilla Form markup ends here -->
Alternative form init
If you don't want to init Vanilla Form by using javascript in onLoad attribute of form tag, there is the second way to init Vanilla Form. To do this, you need to set an event listener for DOMContentLoaded event. You can paste following code snippet into your JS file.
document.addEventListener("DOMContentLoaded", function () {
var myForm;
myForm = new VanillaForm(document.querySelector("form.vanilla"));
});
That's all!
Field options
Setting proper types of input fields, mobile devices will turn on adequate virtual keyboard. All allowed types of input fields are described by HTML 5 standard. But these fields may be interesting for you:
- text - default field for normal text inputs
- number - provides number keyboard, good for input floating point numbers
- tel - provides keyboard to easy input phone numbers
- email - provides keyboard to easy input email address
- url - for easier input URLs
- date - provides date picker
- datetime - provides date picker with time
To set input type just select one from the list above and implement it like in given example:
<input type="number" name="age">
<input type="phone" name="phone">
<input type="text" name="name">
<input type="email" name="email">
Required field
To make field required set required attribute to input field.
<input type="number" required="required" name="age">
Checkbox field checked as a default
To make checkbox field checked as a default you need to set checked attribute to input field.
<input type="checkbox" checked="checked" name="terms">
Radio field checked as a default
Radio field is quite similar to checkbox field. To make it checked as a default you need to set checked attribute to input field. In given example Male option will be checked as a default.
<label><input type="radio" name="sex" checked="checked" value="M"><span><!-- fake radio --></span> Male</label>
<label><input type="radio" name="sex" value="F"><span><!-- fake radio --></span> Female</label>
Drop down / select menu with selected option as default
To make an options selected as a default you need to set selected attribute to option tag. In given example Customer support will be selected as default.
<label class="custom-select">
<select name="department">
<option>Sales</option>
<option>Marketing</option>
<option selected="selected">Customer Support</option>
<option>Other</option>
</select><span><!-- fake select handler --></span>
</label>
Custom messages or translation
Vanilla Form supports making translations and custom messages. It's really simple to do this. To create custom messages or translation assign proper message to form dictionary:
document.addEventListener("DOMContentLoaded", function () {
var myForm;
myForm = new VanillaForm(document.querySelector("form.vanilla"));
myForm.dict.markedAsSpamError = "Your message was marked as spam and was not sent! Fix your message!";
myForm.dict.sendSuccess = "We have received your inquiry. Stay tuned, we’ll get back to you very soon.";
});
Complete dictionary field reference:
- markedAsSpamError - fires when JavaScript script detects that message may be a SPAM
- markedAsSpamServerError - fires when PHP script detects that message may be a SPAM
- sendSuccess - fires when message was send by PHP script
- sendError - fires when mail server has experienced an error
- httpRequestError - fires when script detects connection errors. Add %s to get error number for easier further investigation
- timeoutError - fires when response was timeout. Default value of timeout is 5 seconds
- parseResponseError - fires when response from mail server doesn't match to pattern
Troubleshooting
Common issues and troubles were collected from buyer's feedback and summarized in this troubleshooting page.
If you are still in trouble and form doesn't work as you desire ask question on Comment Page on Envato Website or send me private message through this Contact Form - it's located on the bottom of right column.